آموزش طراحی سایت

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

تازه ترين مطالب

پربازديدترين مطالب

محبوب ترين مطالب

آموزش کن وس Shadow در HTML

پیمان کلانتری پنجشنبه ۱۴ مرداد ۰۰ | ۱۶:۳۴ ۱۷ بازديد

آموزش کن وس Shadow در HTML

چطوری سایه بیندازیم؟

از آنجایی که اکنون می دانید چطور مستطیل بکشید، احتمالا تمایل داشته باشید با انداختن سایه آن را زیباتر کنید. این کار خیلی راحت انجام می شود. لازم است که فقط چند خط بیشتر به کد برنامه خود اضافه کنید. اجازه دهید اول به چند ویژگی که در انداختن سایه دخیل هستند، نگاهی داشته باشیم.

Descriptions
Context properties
فاصله ی افقی (x-axis) بین سایه و شکل در پیکسل.
shadowOffsetX
فاصله ی عمودی(y-axis) بین سایه و شکل در پیکسل.
shadowOffsetY
تا چه اندازه می خواهید سایه شما محو باشد.
shadowBlur
واضح است که برای تنظیم رنگ سایه استفاده می شود.
shadowColor

و در ادامه می بینید.

<div><canvas id="c8" width="200" height="200" style="border:solid 1px #000000;">canvas>div>
<script>
    var c8 = document.getElementById("c8");
    var c8_context = c8.getContext("2d");
‎   function draw_rectangle() {
    c8_context.shadowOffsetX = 5;
    c8_context.shadowOffsetY = 5;
    c8_context.shadowBlur = 10;
    c8_context.shadowColor = "DarkGoldenRod";
    c8_context.fillStyle = "Gold";
    c8_context.fillRect(20, 20, 100, 120);
   ‎}
    window.onload = draw_rectangle();
‎script

همانطور که در کد بالا می بینید، برای ترسیم یک شکل با سایه، قبل از کشیدن سایه لازم است ویژگی های آن را مشخص کنید.

جهت مشاهده مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.

برچسب ها: آموزش طراحی سایت, دوره آموزش طراحی سایت, آموزش برنامه نویسی, آموزشگاه برنامه نویسی, فیلم آموزش برنامه نویسی,

آموزش کن وس Rectangle در HTML

پیمان کلانتری سه شنبه ۲۹ تیر ۰۰ | ۱۴:۲۶ ۱۹ بازديد

آموزش کن وس Rectangle در HTML

قبل از فکر کردن در مورد ایجاد بازی های کنشی HTML5، اجازه دهید با اساس آن شروع کنیم.
ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.

<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;">canvas>
‎<button onclick="draw_square();return true;">Red Squarebutton>
<script>
    function draw_square() {
    ‎  var c1 = document.getElementById("c1");
    ‎  var c1_context = c1.getContext("2d");
    ‎  c1_context.fillStyle = "#f00";
    ‎  c1_context.fillRect(50, 50, 100, 100);
    ‎}
‎script>‎

برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب opening و برچسب closing از
قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید.
قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم.

var c1 = document.getElementById("c1");
   var c1_context = c1.getContext("2d");‎
از لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.
اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.
 
c1_context.fillStyle = "#f00";
c1_context.fillRect(50, 50, 100, 100);‎

جدول زیر روش های کشیدن مستطیل را نشان می دهد.

Descriptions
Methods of "Context"
رنگ CSS، الگو یا گرادیان داخل شکل. پیش فرض fillstyle رنگ سیاه می باشد.
fillStyle
رنگ یا روش CSS از خطوط شکل.
strokeStyle
مسطتیلی بکشید که از نقطه ی x و y شروع می شود و اندازه ی طول x عرض باشد.
fillRect(x, y, width, height)
مستطیلی فقط با حاشیه های آن رسم کنید.
strokeRect(x, y, width, height)
ناحیه مشخص شده در مختصات x و y و همچنین در عرض x طول را روشن کنید.
clearRect(x, y, width, height)

جهت مشاهده نمونه مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.

برچسب ها: آموزش طراحی سایت, دوره آموزش طراحی سایت, آموزش طراحی وب, آموزش برنامه نویسی,

آموزش کن وس Canvas

پیمان کلانتری دوشنبه ۲۸ تیر ۰۰ | ۱۳:۱۵ ۲۱ بازديد

آموزش کن وس Canvas

یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟
canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام لازم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود.
شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.
بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود.
البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید.
اگر قبلا انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.
HTML5 مقوله ی خیلی بزرگی است، آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید. هدف من در این آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست، بلکه تنها معرفی مختصری از آن است. به یاد داشته باشد که این تنها شروع آن است.
برای ایجاد بوم نقاشی، کد ساده ی زیر لازم است.

canvas width="200" height="200">canvas>‎>

به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از DOM (document object model) آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.

‎<canvas id="Canvas1" width="200" height="200" style="border:solid 1px #000000">canvas>‎

اگر در قسمت بالا به جای یک تیره و مربع، یک جمجمه با دو استخوان ضربدری می بینیدبه این معناست که مرورگر شما بوم نقاشی را پشتیبانی نمی کند. ممکن است تمایل داشته باشید مرورگری دانلود کنید که با بوم نقاشی کار کند، همانطور که در زیر می بینید.

Basic Canvas Support
Browsers
✓ (requires ExplorerCanvas)
IE 7
✓
IE 9 Beta
✓
Firefox 3.0
✓
Safari 3.0
✓
Chrome 3.0
✓
Opera 10
 
برچسب ها: آموزش طراحی سایت, دوره آموزش طراحی سایت, آموزش طراحی وب, یادگیری طراحی وب,

HTML Layouts

پیمان کلانتری چهارشنبه ۲۳ تیر ۰۰ | ۱۶:۰۳ ۲۴ بازديد

HTML Layouts

آموزش HTML Layout ‏ ‏

Layout برای یک صفحه ی وب بسیار مهم است، چرا که دید بهتری نسبت به وب سایت شما ارائه می دهد. طراحی Layout خوب با منظره و حس خوب برای یک وب سایت زمان فوق العاده زیادی می گیرد. این روزها همه ی وب سایت های مدرن از چارچوب هایی بر اساس جاوااسکریپت و CSS استفاده میکنند تا به وب سایت های پاسخگو و دینامیک پیروز شوند، اما کار یک Layout در صفحه ی وب شما، صرفا از HTML و ویژگی های ان استفاده می کند.

 

Layout HTML – استفاده از جدول ها

ساده ترین و محبوب ترین راه برای ایجاد Layout ها، استفاده از برچسب < table>در HTML می باشد. این جدول ها در ردیف ها و ستون ها منظم می شوند که شما می توانید از این ردیف ها و ستون ها به هر طریقی که می خواهید استفاده کنید.


 مثال:

برای مثال، نمونه Layout HTML زیر از طریق استفاده ی یک جدول با سه ردیف و دو ستون به دست می آید، اما عنوان و پاورقی ستون هر دو ستون را با استفاده از ویژگی colspan احاطه می کند.

 

نمونه یک

Layout های HTML – استفاده از DIV و Span

عنصر < div>یک عنصر block level می باشد که برای گروه بندی عناصر HTML استفاده می شود. در حالیکه این عنصر یک عنصر block level است، عنصر< span>برای گروه بندی عناصر در یک سطح درون خطی استفاده می شوند.
گرچه می توانیم با جدول های HTML ، Layout های بسیار زیبایی به دست آوریم، اما جدول ها در واقع به عنوان ابزار Layout طراحی نشده اند، و بیشتر برای نمایش داده های جدولی استفاده می شوند.

 

نمونه دو

 توجه:

این مثال از CSS استفاده می کند، بنابراین قبل از درک این مثال، بهتر است درک بهتری از چگونگی کار CSS داشته باشید.

 مثال:

در اینجا سعی می کنیم با استفاده از برچسب < div> همراه با CSS همان نتیجه ای را به دست اوریم که هنگام استفاده از برچسب < table> در مثال قبل به دست آوردیم.

 

نمونه سه

شما می توانید با استفاده از DIV و SPAN به همراه CSS، Layout های بهتری طراحی کنید. برای درک بیشتر از CSS لطفا به CSS Tutorial مراجعه کنید.

برای مشاهده این نمونه برروی دوره آموزش طراحی سایت کلیک نمایید.



برچسب ها: یادگیری طراحی وب, آموزش طراحی سایت, دوره آموزش طراحی سایت, آموزش برنامه نویسی,

جاوااسکریپت در html

پیمان کلانتری سه شنبه ۲۲ تیر ۰۰ | ۱۷:۰۰ ۱۶ بازديد

جاوااسکریپت در html

آموزش javascript‏

یک اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل اضافه کند. به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به باکس پیغام تولید کند، یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط javascript یا VBScript نوشته می شود.
شما می توانید با استفاده از هر زبان اسکریپتی، کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و سپس می توانید آن عملکردها را با استفاده از ویژگی های HTML اجرا کنید.
این روزها فقط javascript و چارچوب های متناظر با آن توسط بسیاری از توسعه دهندگان وب استفاده می شوند. VBScript حتی توسط برخی مرورگرها پشتیبانی هم نمی شود.
شما می توانید کد javascript را در یک فایل مجزا نگهداری کرده و سپس هرزمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل خود داکیومنت HTML تعریف کنید. اجازه بدهید هر دو مورد را یکی یکی با مثال های مناسب بررسی کنیم.

 

جاوااسکریپت خارجی

اگر قصد دارید قابلیتی را تعریف کنید که در انواع داکیومنت های HTML استفاده می شود، بهتر است آن قابلیت را در یک فایل مجزای جاوااسکریپت حفظ کرده و آن فایل را وارد داکیومنت های HTML خود کنید. یک فایل جاوااسکریپت دارای ضمیمه هایی مانند js می باشد که با استفاده از برچسب< script>وارد فایل های HTML می شود.


 مثال:

تصور کنید که با استفاده از جاوااسکریپت در script.js یک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد.


function Hello()
{
    alert("Hello, World");
}



اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTML خود استفاده کنیم، مانند زیر

<input type="button" onclick="Hello();" name="ok" value="Click Me">

این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.

 

جاوا اسکریپت درونی

شما می توانید کد جاوااسکریپت را مستقیما روی داکیومنت HTML خود بنویسید. معمولا کد اسکریپت را با استفاده از برچسب< script>در سربرگ داکیومنت نگهداری می کنیم در غیر این صورت هیچ محدودیتی وجود نداشته و می توانید کد خود را در هر جایی در داکیومنت به جز داخل برچسب < script> نگه دارید.

 

نمونه یک

 
Javascript Internal Script

این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید.

 

گردانندگان رویدادها(()EventHandler)

گردانندگان رویدادها عملکردهای تعریف شده ی ساده ای می باشند که می توانند برعلیه هر یک از عملکردهای ماوس یا صفحه کلید فراخوانده شوند. شما می توانید عملکرد خود را در یک گرداننده ی رویداد تعریف کنید که می تواند یک خط تا 1000 خط کد باشد.
در زیر مثالی را می بینید که چگونگی نگارش یک گرداننده ی رویداد را نشان می دهد. اجازه بدهید یک تیتر ساده ی ()EventHandler را در تیتر داکیومنت بنویسیم. هر زمان که کاربر ماوس را روی یک پاراگراف بیاورد، این عملکر را فرا خواهیم خواند.

 

نمونه دو

برای مشاهده نمونه دو برروی دوره آموزش طراحی سایت کلیک نمایید.



برچسب ها: آموزش برنامه نویسی, آموزش طراحی سایت, دوره آموزش طراحی سایت, آموزش جاوا اسکریپت, آموزش HTMl,

HTML Style Sheet

پیمان کلانتری سه شنبه ۱۵ تیر ۰۰ | ۱۲:۰۴ ۲۳ بازديد

HTML Style Sheet

آموزش طراحی سایت 

آموزش Cascading style sheet ‏ ‏

Cascading style sheet (CSS) بیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند، یا شاید چگونه بیان می شوند. از زمانی که کنسرسیوم در سال 1994 تاسیس شد، W3C به طور فعالانه ای در استفاده از Style sheet روی وب پیشرفت کرده است.
CSS جایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTML ارائه می دهد. با استفاده از CSS شما می توانید تعدادی از ویژگی های طراحی را برای یک HTML ارائه شده تعیین کنید. هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت (:) از هم جدا شده اند. اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند.


 مثال:

ابتدا اجازه بدهید که مثالی از داکیومنت HTML را مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب < font> استفاده می کند.

 

نمونه یک





HTML CSS


Hello, World!






می توانیم با استفاده از style sheet مثال بالا را مانند زیر بازنویسی کنیم.

نمونه دوم

HTML CSS

Hello, World!

 

شما می توانید به سه روش از CSS در داکیومنت HTML خود استفاده کنید.

 

  • Style sheet خارجی – قوانین style sheet را در یک فایل css مجزا تعریف می کند، و سپس آن فایل را با استفاده از برچسب در HTML وارد داکیومنت HTML شما می کند.
  • Style sheet داخلی – قوانین style sheet را در با استفاده از برچسب< style>در بخش سربرگ داکیومنت HTML تعریف می کند.
  • Inline style sheet – قوانین style sheet را مستقیما و به همراه عناصر HTML با استفاده از ویژگی style تعریف می کند.

اجازه بدهید هر سه مورد را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.

 

Style sheet خارجی

اگر می خواهید از style sheet خود در صفحات مختلف استفاده کنید، توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید. یک فایل cascading style sheet دارای ضمیمه هایی مانند css می باشد و با استفاده از برچسب < link> وارد فایل های HTML خواهد شد.


 مثال:

توجه داشته باشید که ما یک فایل style sheet به نام style.css که دارای قوانین زیر می بشد، تعریف می کنیم.


.red{
   color: red;
}
.thick{
   font-size:20px;
}
.green{
   color:green;
}
در اینجا سه قانون CSS را تعریف کردیم که برای سه گروه متفاوت تعریف شده در برچسب های HTML مناسب می باشند. پیشنهاد می کنم در مورد چگونگی تعریف این قوانین خود را اذیت نکنید، زیرا هنگام مطالعه ی CSS آنها را فرا خواهید گرفت.
اکنون اجازه بدهید از فایل CSS خارجی بالا در داکیومنت HTML زیر استفاده کنیم.
< !DOCTYPE html>
 
< html>
< head>
< title>HTML External CSS< /title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
 
< /head>
< body>
< p class="red">This is red< /p>
  
< p class="thick">This is thick< /p>
  
< p class="green">This is green< /p>
  
< p class="thick green">This is thick and green< /p>
< /body>
< /html>
 
این مثال نتیجه ی زیر را تولید خواهد کرد.
This is red
This is thick
This is green
This is thick and green

Style sheet داخلی

اگر می خواهید قوانین style sheet را برای یک داکیومنت مجزا به کار ببرید، فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب< style>وارد بخش سربرگ داکیومنت HTML کنید.
قوانین تعریف شده در style sheet داخلی، قوانین تعریف شده در فایل CSS خارجی را نیز در بر می گیرد.


 مثال:

اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما در اینجا قوانین style sheet را در همان داکیومنت HTML و با استفاده از برچسب< style>می نویسیم.

 

نمونه سوم


<!DOCTYPE html>
HTML Internal CSS

This is red

 

This is thick

 

This is green

 

This is thick and green



شما می توانید با استفاده از ویژگی style از برچسب مربوطه، قوانین style sheet را مستقیما برای هر عنصر HTML به کار برید. این امر فقط زمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTML می باشید.
قوانین تعریف شده با عنصر درون خطی، قوانین تعریف شده در یک فایل CSS خارجی و نیز قوانین تعریف شده در یک عنصر< style>را در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم، اما این بار قوانین style sheet را همراه با قوانین HTML و با استفاده از ویژگی style در عناصر خواهیم نوشت.

نمونه چهارم


HTML Inline CSS

This is red

 

This is thick

 

This is green

 

This is thick and green

برچسب ها: آموزش طراحی سایت, دوره آموزش طراحی سایت, آموزش برنامه نویسی, آموزشگاه برنامه نویسی,

سربرگ HTML

پیمان کلانتری سه شنبه ۱۸ خرداد ۰۰ | ۱۴:۴۳ ۲۰ بازديد

سربرگ HTML‏‏

یاد گرفتیم که یک نمونه داکیومنت HTML دارای ساختار زیر می باشد.

Document declaration tag
< html>
< head>
    Document header related tags
< head>
< body>
    Document body related tags
< body>
< html>

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.

برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.

نمونه یک

HTML Title Tag Example

Hello, World!

 

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

 

نمونه دو

HTML Title Tag Example
 
 
 
 
 
 

Hello, World!

برچسب < base> در HTML

این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد.
به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد

 

نمونه سه

HTML Title Tag Example
Logo Images

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

 

نمونه چهار

HTML Title Tag Example

Hello, World!

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

 

نمونه پنج




HTML style Tag Example




Hello, World!





 توجه:

برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.

برچسب< script>در HTML

این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم.

 

نمونه شش




HTML Title Tag Example








جهت مشاهده کدها برروی آموزش طراحی سایت کلیک نمایید 

برچسب ها: آموزش html css, دوره آموزش طراحی سایت, فیلم اموزش طراحی سایت, آموزش جاوا اسکریپت, آموزش طراحی سایت,

HTML Marquees

پیمان کلانتری دوشنبه ۱۷ خرداد ۰۰ | ۱۵:۳۵ ۲۶ بازديد

HTML Marquees
 
آموزش طراحی سایت 

آموزش HTML Marquee ‏ ‏‏

Marquee در HTML یک قطعه اسکرولینگ می باشد که یا به صورت افقی در عرض متن ویا به صورت عمودی در پایین صفحه ی وب شما نمایش داده می شود، بستگی به تنظیمات دارد وتوسط برچسب < fmarquees>مربوط به HTML ایجاد می شود.

 

 توجه:

ممکن است برچسب < marquees> در HTML توسط مرورگرهای زیادی پشتیبانی نشود، بنابراین توصیه می شود که به این برچسب تکیه نکنید، در عوض می توانید از javascript و CSS برای ایجاد چنین تاثیراتی استفاده کنید.

ترکیب ساده برای استفاده از برچسب< marquees> در HTML مانند زیر می باشد:


< marquee attribute_name="attribute_value" ....more attributes>
    One or more lines or text message or image
< /marquee>


ویژگی های برچسب < marquee>

در زیر لیست مهمی از ویژگی های برچسب < marquee> را می توانید مشاهده کنید.

Attribute                                                                                                             Description
width
  این ویژگی عرض marquee را مشخص می کند. می تواند مقداری مانند 10 یا 20 درصد باشد.                                                                  
height
این ویژگی طول marquee را مشخص می کند. می تواند مقداری مانند 10 یا 20 درصد باشد                                                                    .
direction
این ویژگی مسیری را که marquee باید در آن اسکرول شود، تعیین می کند. می تواند مقداری مانند up، down، left و یا right داشته باشد.       
behavior
این ویژگی نوع اسکرول marquee را تعیین می کند. می تواند مقداری مانند scroll، side و alternate داشته باشد.                                        
scrolldelay
این ویژگی میزان تاخیر بین دو پرش را تعیین می کند. می تواند مقداری مانند 10 داشته باشد.                                                                  
scrollamount
سرعت متن marquee را تععین می کند. می تواند مقداری مانند 10 داشته باشد.                                                                                  
loop
تعداد دفعات loop را تعیین می کند. مقدار پیش فرض INFINITE می باشد که به این معناست که در marquee به طور پایان ناپذیری loop انجام می شود. 
bgcolor
این ویژگی رنگ زمینه را به شکل نام رنگ یا مقدار شش تایی رنگ مشخص می کند.                                                                              
hspace
این ویژگی فضای افقی اطراف marque را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.                                              
vspace
این ویژگی فضای عمودی اطراف marquee را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.                                           



در ادامه چند مثال از استفاده ی برچسب marquee می بینید.


 مثال:

نمونه یک

HTML marquee Tag
This is basic example of marquee

 مثال:

نمونه دو

HTML marquee Tag
This example will take only 50% width
 مثال:

نمونه سه

HTML marquee Tag
This text will scroll from left to right
 مثال:

نمونه چهار

HTML marquee Tag
This text will scroll from bottom to up
جهت مشاهده کدها برروی دوره آموزش طراحی سایت کلیک نمایید
برچسب ها: آموزش طراحی وب, فیلم اموزش طراحی سایت, آموزش جاوا اسکریپت, آموزش html css,

HTML Embed Multimedia

پیمان کلانتری پنجشنبه ۱۳ خرداد ۰۰ | ۱۸:۰۳ ۲۲ بازديد

HTML Embed Multimedia

آموزش طراحی سایت 

آموزش چند رسانه ای در HTML‏ ‏

گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید.


 مثال:

در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی midi.

 

مرحله 1

HTML embed Tag <title></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><embed src="/html/yourfile.mid"` width="100%" height="60"></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><noembed><img src="yourimage.gif" alt="Alternative Media"><noembed></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><embed></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><html><br /><br /></span> <h3 class=" InnerTitle1" style="text-align: right;">ویژگی های برچسب < embed></h3> <p style="text-align: right;">در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.</p> <span style="font-size: 12px;"><br /></span> <div class="divTable"> <div class="divTableBody"> <div class="divTableRow"> <div class="divTableHead">Attribute</div> <div class="divTableHead">Description</div> </div> <div class="divTableRow"> <div class="divTableCell">align</div> <div class="divTableCell">تعیین می کند که چگونه یک آبجکت را تنظیم کرد، که می تواند هم در مرکز، هم در راست و یا چپ تنظیم شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">autostart</div> <div class="divTableCell">این ویژگی Boolean نشان می دهد که آیا مدیا باید به طور خودکار شروع به کار کند. شما می توانید آن را با true یا false تنظیم کنید.</div> </div> <div class="divTableRow"> <div class="divTableCell">loop</div> <div class="divTableCell">تعیین می کند که آیا صدا متداولا پشت سرهم تکرار شود( لوپ را روی true تنظیم کنید)، یا چند دفعه باید تکرار شود ( یک مقدار مثبت) و یا اصلا تکرار نشود(false).</div> </div> <div class="divTableRow"> <div class="divTableCell">playcount</div> <div class="divTableCell">تعداد دفعاتی را که یک صدا باید تکرار شود تعیین می کند. اگر در حال استفاده از IE هستید، این گزنیه جایگزینی برای loop می باشد.</div> </div> <div class="divTableRow"> <div class="divTableCell">hidden</div> <div class="divTableCell">مشخص می کند که آیا آبجکت مولتی مدیا باید روی صفحه نمایش داده شود.مقدار false یعنی نه و مقدار true یعنی بله.</div> </div> <div class="divTableRow"> <div class="divTableCell">width</div> <div class="divTableCell">عرض آبجکت به پیکسل.</div> </div> <div class="divTableRow"> <div class="divTableCell">height</div> <div class="divTableCell">عرض آبجکت به پیکسل.</div> </div> <div class="divTableRow"> <div class="divTableCell">name</div> <div class="divTableCell">نامی که برای اشاره به آبجکت استفاده می شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">src</div> <div class="divTableCell">URL مربوط به آبجکت که باید جاسازی شود.</div> </div> <div class="divTableRow"> <div class="divTableCell">volume</div> <div class="divTableCell" style="direction: rtl;">میزان صدا را کنترل می کند که می تواند از 0 (صدا قطع شده) تا 100 (آخرین حد صدا) باشد.</div> </div> </div> </div> <h3 class=" InnerTitle1" style="direction: rtl;">انواع ویدیوهای پشتیبانی شده</h3> <p style="direction: rtl;">می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.</p> <span style="font-size: 12px;"><br /></span> <div style="direction: rtl;">فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.</div> <div style="direction: rtl;">فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.</div> <div style="direction: rtl;">فایل های mov - فرمت Quick time movie در اپل.</div> <div style="direction: rtl;"> فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.</div> <div class="example"> <h2 class="example_head" style="direction: rtl; text-align: right;">مرحله2<br /><br /></h2> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><!DOCTYPE html></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><html xmlns="http://www.w3.org/1999/xhtml"></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><title>HTML embed Tag<title></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><embed src="/html/yourfile.swf" width="200" height="200"></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><noembed><img src="yourimage.gif" alt="Alternative Media"><noembed></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><embed></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><body></span></div> <div style="direction: ltr; text-align: left;"><span style="font-size: 12px;"><html><br /></span> <h3 class=" InnerTitle1" style="text-align: right;">صدای زمینه</h3> <p style="text-align: right;">شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.<br />در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.</p> <span style="font-size: 12px;"><br /></span> <div class="example"> <h2 class="example_head" style="text-align: right;">جهت مشاهده مثالها برروی <a title="دوره آموزش طراحی سایت" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx">دوره آموزش طراحی سایت</a> کلیک نمایید</h2> </div> </div> </div> </div> </div> <div id="gtx-trans" style="position: absolute; left: 639px; top: -11.9236px;"> </div> </div> <div class="post-tags"> <span class="tag"> </span> برچسب ها: <a href="https://tahlildadeh.farsiblog.com/tag/آموزش+طراحی+سایت/">آموزش طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/دوره+طراحی+سایت/">دوره طراحی سایت</a>, <a href="https://tahlildadeh.farsiblog.com/tag/طراحی+سایت+دیجی+کالا/">طراحی سایت دیجی کالا</a>, </div> </div> <div class="post-info"> <ul> <li> <div class="postlike"><a href="https://tahlildadeh.farsiblog.com/prate/upEjzZOLexzuZOKvL/" class="uplike"><span class="like-up"></span></a><span class="up-result"><span class="fbrateQuery fbrateUp" id="fbrate_upEjzZOLexzuZOKvL">۰</span></span><a href="https://tahlildadeh.farsiblog.com/prate/downEjzZOLexzuZOKvL/" class="downlike"><span class="like-down"></span> </a><span class="down-result"><span class="fbrateQuery fbrateDown" id="fbrate_downEjzZOLexzuZOKvL">۰</span></span></div> </li> <li> <span class="postcmnt"> <a href="https://tahlildadeh.farsiblog.com/post/HTML-Embed-Multimedia/#comments">۰ نظر</a></span> </li> </ul> </div> </div><div class="post"> <div class="post-title"> <span class="post-title-icon"></span> <h2><a href="https://tahlildadeh.farsiblog.com/post/آموزشIframesدرhtml/" target="_blank"> آموزش Iframes در html </a></h2> </div> <div class="post-body"> <div class="post-details"><span class="postauthor">پیمان کلانتری</span> <span class="postdate"> چهارشنبه ۱۲ خرداد ۰۰ | ۱۲:۴۵ </span> <span class="postviews"> ۲۰ بازديد </span> </div> <div class="post-cnt"> <h2 class=" InnerTitle"><a title="آموزش طـــــراحــــی سایــــت" href="http://www.tahlildadeh.com/CourseDetails/28/%D8%AF%D9%88%D8%B1%D9%87-%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA-Web-Design.aspx">آموزش طـــــراحــــی سایــــت</a> - آموزش Iframes</h2> <p>شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.<br />ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.</p> <br /><span class="SampleTitle"> مثال:</span><br /> <p>در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.</p> <br /> <div class="example"> <h2 class="example_head">نمونه یک<br /><br /></h2> <div style="direction: ltr;"><span style="font-size: 12px;"><!DOCTYPE html></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><html></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><head></span></div> <div style="direction: ltr;"><span style="font-size: 12px;"><title>HTML Iframes

Document content goes here...

Document content also go here...

ویژگی های برچسب < iframe>

بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.

 

Attribute                                                                                                                             Description
src
این ویژگی برای نام گذاری فایلی استفاده می شود که باید در frame بارگذاری شود. مقدار آن می تواند هر URL باشد. برای مثال src="/html/top_frame.htm" فایل HTML موجود در مسیر html را بارگذاری خواهد کرد.
name
این ویژگی به شما اجازه می دهد تا یک frame را نامگذاری کنید. این ویژگی نشان می دهد که یک داکیومنت در کدام frame باید بارگذاری شود. هنگامی که می خواهید لینک هایی را در یک frame ایجاد کنید که صفحاتی را در یک frame دیگر بارگذاری می کند، که در این مورد دومین frame برای تشخیص خود به عنوان هدف لینک به نام نیاز دارد، در اینجا این ویژگی بسیار مهم است.
frameborder
این ویژگی مشخص می کند که آیا حاشیه های frame نشان داده شوند یا خیر. این ویژگی مقدار داده شده به ویژگی frameborder روی برچسب < frameset> را می گیرد، البته اگر مقداری مشخص شده باشد، این مقدار می تواند 1 (بله) و یا 0 (خیر) باشد.
marginwidth
این ویژگی به شما اجازه می دهد تا عرض فضای بین حاشیه های چپ و راست frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginwidth="10".
marginheight
این ویزگی به شما اجازه می دهد تا طول فضای بین بالا و پایین حاشیه ی frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10"
noresize
به طور پیش فرض هر frame را با کلیک کردن و درگ کردن روی حاشیه های آن می توانید تغییر اندازه دهید. ویژگی noresize مانع تغییر اندازه ی frame توسط یوزر می شود. برای مثال noresize="noresize".
scrolling
این ویژگی ظاهر نارهای اسکرول نمایان شده در frame را کنترل می کند. این ویزگی مقادیر "yes", "no" یا "auto"را می گیرد. برای مثال scrolling="no" به معنای نبودن نوارهای اسکرول می باشد.
longdesc
این ویژگی به شما اجازه می دهد تا یک لینک به صفحه ای حاوی یک توصیف طولانی از محتوای frame، ارائه بدهید. برای مثال longdesc="framedescription.htm"


برچسب ها: دوره آموزش طراحی سایت, فیلم اموزش طراحی سایت, آموزش طراحی سایت با html, آموزش html css,

پربحث ترين مطالب

آخرين نظرات

درباره من

آموزشگاه تحلیل داده ارایه دهنده به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی است که در این زمینه بی رقیب است
شنبه ۰۸ اردیبهشت ۰۳

موضوعات

نويسندگان

آرشيو

برچسب ها

خلاصه آمار

  • مجموع نمایش‌ ۲۰,۲۰۰
  • مجموع بازدید ۱۲,۹۳۱
  • بازدید امروز ۵
  • بازدید دیروز ۲
  • مجموع مطالب ۹۴
  • مجموع نظرات ۲۱
  • افراد آنلاین ۲

من در شبكه هاي اجتماعي

پيوندها

فارسي بلاگ : رسـانه وبلاگ نويسان حرفـه اي